<template>
    <div class="line-app">
        <h3 style="margin-bottom: 10px;">当前科室排队情况</h3>
        <div class="row">
            <div class="rowitem"><strong>74</strong>
                <div class="rowcolor">新血管科</div>
            </div>
            <div class="rowitem"> <strong>74</strong>
                <div class="rowcolor">新血管科</div>
            </div>
        </div>
        <div class="row">
            <div class="rowitem"><strong>74</strong>
                <div class="rowcolor">新血管科</div>
            </div>
            <div class="rowitem"> <strong>74</strong>
                <div class="rowcolor">新血管科</div>
            </div>
        </div>
        <div class="rowitems"><strong>74</strong>
            <div class="rowcolor">新血管科</div>
        </div>
        <h3 style="margin-bottom: 10px; margin-top: 50px;">当班主任</h3>
        <div class="row">
            <div class="rowitem">
                <div></div>赵玉凤<div class="rowcolor">ey-071</div>
            </div>
            <div class="rowitem">
                <div></div>赵玉凤<div class="rowcolor">ey-071</div>
            </div>
        </div>
        <div class="row">
            <div class="rowitem">
                <div></div>赵玉凤<div class="rowcolor">ey-071</div>
            </div>
            <div class="rowitem">
                <div></div>赵玉凤<div class="rowcolor">ey-071</div>
            </div>
        </div>
        <h3 style="margin-bottom: 10px;  margin-top: 50px; ">医院公告</h3>
        <div class="Gg">
            <div class="Gg-box" v-for="item in arr" :key="item.msg">
                <div><el-icon size="20" color="#409EFF">
                        <BellFilled />
                    </el-icon>{{ item.msg }}</div>
                <div>{{ item.time }}</div>
            </div>

        </div>


    </div>
</template>

<script setup lang="ts">
const arr = [{
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
},
{
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
},
{
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
},
{
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
}, {
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
}, {
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
}, {
    msg: '关于召开2022年年度会议通知',
    time: '2022-1-11'
}

]


</script>

<style scoped lang="scss">
.line-app {
    width: 500px;
    background: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.rowitem {
    height: 40px;
    width: 47%;
    background-color: #F5F7FA;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 5px;
    align-items: center;
}

.rowitems {
    height: 40px;
    width: 100%;
    background-color: #F5F7FA;
    border-radius: 5px;
    align-items: center;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}

.Gg {
    padding: 0 20px;

    width: 100%;
    line-height: 40px;
    // display: flex;

    // justify-content: space-between;
}

.Gg-box {
    display: flex;
    justify-content: space-between;

}

.rowcolor {
    color: #8c8d8f;
}
</style>